<template>
  <div class="about-summary">
    <div class="banner">
      <img src="@/assets/images/20200401115954178998.png" alt="" />
    </div>

    <div class="company-info">
      <div class="left-sidebar">
        <h3>公司新闻</h3>
        <ul class="menu">
          <router-link :to="{ path: './notice' }">
            <li class="active">业务须知</li>
          </router-link>
          <router-link :to="{ path: './process' }">
            <li>服务流程</li>
          </router-link>
          <router-link :to="{ path: './faq' }">
            <li>汽车保养FAQ</li>
          </router-link>
        </ul>
        <div class="contact-info">
          <div class="contact-item">
            <img src="@/assets/images/202004011028126d577b.png" alt="咨询热线" class="contact-icon" />
          </div>
          <div class="contact-item">
            <img src="@/assets/images/20200401105022f62918.png" alt="邮箱" class="contact-icon" />
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="breadcrumb">
          <h4>业务流程</h4>
          <span> <router-link :to="{ path: '/' }">
              <li class="active">首页</li>
            </router-link>>客户服务>业务须知</span>
        </div>
        <!-- 新增新闻列表部分 -->
        <div class="news-list">
          <div class="materials">
            <p>所需提交材料：</p>
            <p>1、《机动车辆行驶证》</p>
            <p>2、机动车辆所有人身份证/组织机构代码</p>
            <p>3、车主身份证</p>
            <p>4、机动车购置发票</p>
          </div>
          <div>
            <!-- 流程步骤部分 -->
            <p style="text-align: left;">延保流程:</p>
            <div class="process-steps">
              <!-- 业务咨询 -->
              <div class="step-item">
                <img src="@/assets/images/202003242336549b19fe.jpg"
                  class="step-icon" alt="咨询图标" />
                <div class="step-content">
                  <p>业务咨询 <span style="font-size: 12px;color: #666666;font-weight: 500;">400-025-0558</span></p>
                  <p>致电苏众延400热线。</p>
                </div>
              </div>

              <!-- 业务办理 -->
              <div class="step-item">
                <img src="@/assets/images/202003242336545347b9.jpg"
                  class="step-icon" alt="办理图标" />
                <div class="step-content">
                  <p>业务办理</p>
                  <p>详询400-025-0558；或各品牌授权经销商门店。</p>
                </div>
              </div>

              <!-- 会员缴费 -->
              <div class="step-item">
                <img src="@/assets/images/202003242336545997c4.jpg"
                  class="step-icon" alt="缴费图标" />
                <div class="step-content">
                  <p>会员缴费</p>
                  <p>
                    众延为会员提供多项灵活延保服务选择，总有合适您爱车的服务内容。
                  </p>
                </div>
              </div>

              <!-- 会员服务 -->
              <div class="step-item">
                <img src="@/assets/images/202003242336547307da.jpg"
                  class="step-icon" alt="会员图标" />
                <div class="step-content">
                  <p>会员服务</p>
                  <p>
                    您的爱车除了可以享受延长保修服务外，众延还免费提供多项技术检测和意外补偿服务。
                  </p>
                </div>
              </div>

              <!-- 售后服务 -->
              <div class="step-item">
                <img src="@/assets/images/202003242336544e89fb.jpg"
                  class="step-icon" alt="售后图标" />
                <div class="step-content">
                  <p>售后服务 <span style="font-size: 12px;color: #666666;font-weight: 500;">400-025-0558</span></p>
                  <p>
                    众延配备7*24小时售后服务热线，您的爱车发生任何质量问题，众延将会第一时间帮您解决烦恼。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
</script>
<style scoped lang="scss">
a {
  text-decoration: none;
  color: #333;
}

.about-summary {
  .banner {
    img {
      width: 100%; // 示例样式
      height: auto; // 示例样式
    }
  }

  .company-info {
    display: flex;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;

    .left-sidebar {
      width: 250px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        color: #c66b00;
        font-size: 22px;
        font-weight: 700;
      }

      .menu {
        list-style: none;
        padding: 0;
        text-align: center;

        li {
          padding: 10px 15px;
          cursor: pointer;
        }
      }

      .contact-info {
        .contact-item {
          display: flex;
          align-items: center;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 0 30px;
      text-align: center;

      .breadcrumb {
        margin-bottom: 20px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 10px;

        h4 {
          color: #333;
          margin: 0;
        }
        span{
          display: flex;
        }
      }

      .news-list {
        .news-item {
          display: flex;
          margin-bottom: 30px;
          padding: 20px;
          background: #fff;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

          .news-image {
            width: 200px;
            height: 150px;
            margin-right: 20px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .news-content {
            flex: 1;
            text-align: left;

            h3 {
              color: #333;
              margin: 0 0 10px;
              font-size: 18px;
            }

            p {
              color: #666;
              margin: 0 0 15px;
              line-height: 1.6;
            }

            .more-link {
              text-align: right;

              span {
                color: #c66b00;
                cursor: pointer;

                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }

      img {
        margin: 0 auto;
        display: inline-block;
      }
    }
  }

  .service-features {
    display: flex;
    // gap: 20px;
    // flex-wrap: wrap;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 20px;

    .feature_flex {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      gap: 30px;
      padding-left: 5%;
      padding-right: 5%;

      .feature-item {
        flex: 1 1 calc(50% - 40px);
        min-width: 200px;
        border-radius: 8px;
        padding: 10px;

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}

/* 材料清单样式 */
.materials {
  border-radius: 8px;
  padding: 20px;
  background: url("https://cdn-cloudflare.meidianbang.cn/comdata/70956/202003/20200324233340160cca.jpg") no-repeat;
  margin-bottom: 10px;

  p {
    margin: 0;
    text-align: left;
    font-size: 14px;
  }
}

/* 流程步骤样式 */
.process-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.step-item {
  width: 40%;
  display: flex;
  align-items: center;
}

.step-icon {
  width: 120px;
  height: 64px;
  padding-right: 15px;
  margin: 0 !important;
}

.step-content {
  color: #333;
  text-align: left;
}

.step-content p:nth-child(1) {
  font-size: 16px;
  font-weight: 800;
}

.step-content p {
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .process-steps {
    padding: 0 20px;
  }

  .step-item {
    width: 100%;
  }
}
</style>
